<template>
  <div class="course">
    <van-nav-bar title="全部课程" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" size="20" />
      </template>
    </van-nav-bar>

    <van-grid>
      <van-grid-item icon="photo-o" text="动作训练" />
      <van-grid-item icon="photo-o" text="排行榜" />
      <van-grid-item icon="photo-o" text="练计划" />
      <van-grid-item icon="photo-o" text="直播课" />
    </van-grid>

    <van-tree-select
      height="140vw"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <div v-if="active === 0" class="type1">
          <div class="box" v-for="item in course_coach" :key="item.pid"  @click="$router.push(`/index/detail/${item.pid}`)">
            <img :src="base + item.pic" alt="" />
            <div>
              <div class="coach">
                <img :src="base + item.headpic" alt="" />
                <span>{{ item.nickname }}</span>
              </div>
              <div class="title">
                <p>{{ item.title }}</p>
                <p>{{ item.duration }}分钟</p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="active === 1" class="type1">
          <div class="box" v-for="item in typeList2" :key="item.pid" >
            <img :src="base + item.pic" alt="" />
            <div>
              <div class="coach">
                <img :src="base + item.headpic" alt="" />
                <span>{{ item.nickname }}</span>
              </div>
              <div class="title">
                <p>{{ item.title }}</p>
                <p>{{ item.duration }}分钟</p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="active === 2" class="type1">
          <div class="box" v-for="item in typeList3" :key="item.pid">
            <img :src="base + item.pic" alt="" />
            <div>
              <div class="coach">
                <img :src="base + item.headpic" alt="" />
                <span>{{ item.nickname }}</span>
              </div>
              <div class="title">
                <p>{{ item.title }}</p>
                <p>{{ item.duration }}分钟</p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="active === 3" class="type1">
          <div class="box" v-for="item in typeList4" :key="item.pid">
            <img :src="base + item.pic" alt="" />
            <div>
              <div class="coach">
                <img :src="base + item.headpic" alt="" />
                <span>{{ item.nickname }}</span>
              </div>
              <div class="title">
                <p>{{ item.title }}</p>
                <p>{{ item.duration }}分钟</p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="active === 4" class="type1">
          <div class="box" v-for="item in typeList5" :key="item.pid">
            <img :src="base + item.pic" alt="" />
            <div>
              <div class="coach">
                <img :src="base + item.headpic" alt="" />
                <span>{{ item.nickname }}</span>
              </div>
              <div class="title">
                <p>{{ item.title }}</p>
                <p>{{ item.duration }}分钟</p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="active === 5" class="type1">
          <div class="box" v-for="item in typeList6" :key="item.pid">
            <img :src="base + item.pic" alt="" />
            <div>
              <div class="coach">
                <img :src="base + item.headpic" alt="" />
                <span>{{ item.nickname }}</span>
              </div>
              <div class="title">
                <p>{{ item.title }}</p>
                <p>{{ item.duration }}分钟</p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="active === 6" class="type1">
          <div class="box" v-for="item in typeList7" :key="item.pid">
            <img :src="base + item.pic" alt="" />
            <div>
              <div class="coach">
                <img :src="base + item.headpic" alt="" />
                <span>{{ item.nickname }}</span>
              </div>
              <div class="title">
                <p>{{ item.title }}</p>
                <p>{{ item.duration }}分钟</p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import { base } from "@/service";
import httpApi from "@/http";
export default {
  data() {
    return {
      active: 0,
      items: [],
      c_id: [],
      course_coach: {
        title: "",
        duration: "",
        pic: "",
        detail: "",
        headpic: "",
        nickname: "",
      },
      base,
      typeList2: {
        title: "",
        duration: "",
        pic: "",
        detail: "",
        headpic: "",
        nickname: "",
      },
      typeList3: {
        title: "",
        duration: "",
        pic: "",
        detail: "",
        headpic: "",
        nickname: "",
      },
      typeList4: {
        title: "",
        duration: "",
        pic: "",
        detail: "",
        headpic: "",
        nickname: "",
      },
      typeList5: {
        title: "",
        duration: "",
        pic: "",
        detail: "",
        headpic: "",
        nickname: "",
      },
      typeList6: {
        title: "",
        duration: "",
        pic: "",
        detail: "",
        headpic: "",
        nickname: "",
      },
      typeList7: {
        title: "",
        duration: "",
        pic: "",
        detail: "",
        headpic: "",
        nickname: "",
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    courseType() {
      httpApi.courseApi.courseType().then((res) => {
        console.log(res);
        this.c_id = res.data.data.c_id;
        let arr = [];
        res.data.data.forEach((el) => {
          arr.push({ text: el.typename, c_id: el.c_id });
        });
        this.items = arr;
        this.c_id = arr;
        console.log(this.c_id);
      });
    },

    coachBycourse() {
      httpApi.courseApi.coachByCourserId().then((res) => {
        console.log(res);
        this.course_coach = res.data.data;
      });
    },

    courseTypeList() {
      httpApi.courseApi.coachByCourserTypeId({ c_id: 2 }).then((res) => {
        console.log(res);
        this.typeList2 = res.data.data;
      });

      httpApi.courseApi.coachByCourserTypeId({ c_id: 3 }).then((res) => {
        console.log(res);
        this.typeList3 = res.data.data;
      });

      httpApi.courseApi.coachByCourserTypeId({ c_id: 4 }).then((res) => {
        console.log(res);
        this.typeList4 = res.data.data;
      });

      httpApi.courseApi.coachByCourserTypeId({ c_id: 5 }).then((res) => {
        console.log(res);
        this.typeList5 = res.data.data;
      });

      httpApi.courseApi.coachByCourserTypeId({ c_id: 6 }).then((res) => {
        console.log(res);
        this.typeList6 = res.data.data;
      });

      httpApi.courseApi.coachByCourserTypeId({ c_id: 7 }).then((res) => {
        console.log(res);
        this.typeList7 = res.data.data;
      });
    },
  },
  mounted() {
    this.courseType();
    this.coachBycourse();
    this.courseTypeList();
  },
};
</script>

<style>
.van-grid-item__content::after{
  border: none;
}

.course .van-nav-bar .van-icon {
  color: #000;
}
.course span{
  color: #fff;
}
.van-tree-select__nav {
  flex: 0.75;
}

.van-tree-select__content {
  padding: 10px;
}

.type1 .box {
  position: relative;
  width: 100%;
  margin-bottom: 2vh;
  height: 20vh;
}

.type1 .box > div {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 10px;
  color: #fff;
}

.type1 .box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.type1 .box .coach {
  display: flex;
  padding: 10px 10px;
  align-items: center;
}

.type1 .box .coach img {
  width: 30px;
  margin-right: 10px;
  border-radius: 50%;
}

.type1 .box .title {
  margin: 40px 0 0 10px;
}
.type1 .box .title p{
  color: #fff;
}
.van-grid{
  top: 0;
}
</style>
<style>
* {
  padding: 0;
  margin: 0;
}

img {
  display: block;
}
</style>
